<template>
	<view class="warp">
		<view class="center">
			<view class="item" v-for="(item,index) in message" :key="index">
				<!-- <view class="red" v-if="item.pm"></view> -->
				<view class="title wtg" v-if="item.status == -1">提现失败 <text
						style="font-size: 20rpx;margin-left: 50rpx;width: 30%;"  class="word-omit" >{{'失败原因：' + item.fail_msg}}</text></view>
				<view class="title shz" v-if="item.status == 0">审核中</view>
				<view class="title tg" v-if="item.status == 1">提现成功</view>
				<view :class="[item.pm?'content':'content1']" class="word-omit" style="width: 80%;">
					提现到银行卡{{item.bank_code}}
				</view>
				<view class="time">{{item.add_time}}</view>
				<view class="abs">- <text class="o-money"> {{item.extract_price}}</text></view>
				<view class="yue"><text class="y-word">零钱余额</text>{{item.balance}}</view>
			</view>
			<view class="footer">
				*温馨提示：提现失败余额会返还到账户！
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserExtractList
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				message: []
			}

		},
		created() {
			this.datainit()
		},
		methods: {
			datainit() {
				getUserExtractList().then(res => {
					this.message = res.data
				})
			}
		}

	}
</script>
<style scoped lang="less">
	.warp {
		background-color: #fafafa;
		display: flex;
		justify-content: center;
		align-items: flex-start;

		.center {
			width: 90%;

			.item {
				padding: 10rpx 40rpx;
				margin-top: 30rpx;
				position: relative;
				height: 180rpx;
				background-color: #FFFFFF;

				.title {

					font-size: 28rpx;
				}

				.tg {
					color: #67C23A;
				}

				.wtg {
					color: #F56C6C;
				}

				.shz {
					color: #E6A23C;
				}

				.content {
					color: #666666;
					font-size: 22rpx;
					margin-top: 10rpx;
				}

				.content1 {
					color: #999999;
					font-size: 22rpx;
					margin-top: 10rpx;
				}

				.red {
					width: 10rpx;
					height: 10rpx;
					background-color: red;
					border-radius: 50%;
					position: absolute;
					left: 20rpx;
					top: 30rpx;
				}

				.add {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					font-size: 26rpx;
					font-size: 500;
					color: #FFC300;
				}

				.abs {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					font-size: 26rpx;
					font-size: 500;
					color: #000000;
				}

				.yue {
					position: absolute;
					right: 20rpx;
					top: 120rpx;
					font-size: 36rpx;
					// font-size: 500;
					color: #999;
				}

				.y-word {
					font-size: 24rpx;
					margin-right: 8rpx;
				}

				.time {
					color: #999999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
		}

	}

	.o-money {
		font-size: 32rpx;
	}

	.footer {
		color: #F56C6C;
		font-size: 22rpx;
		width: 100%;
		margin-top: 30rpx;
		text-align: center;
	}
</style>
